import React, { Component } from 'react';
import {
	StyleSheet, Text, View, Image, TouchableOpacity, Animated
} from 'react-native';
import { GLOBAL } from '../../../config/global';
import { style } from '../../../theme/style';
import { API, API_GENERATE } from '../../../config/api';
import HTTP from '../../../utils/http';
import { NavigationEvents } from 'react-navigation';
import navigationSeevice from '../../../components/navigation/navigationSeevice';
const scale = GLOBAL.SCALE;
export default class CarouselMessage extends Component {


	constructor(props) {
		super(props);
		this.state = {
			iTop: new Animated.Value(0),
		};
		this.speed = 0;
		this.stopAnimated = true;
		this.recordCount = 0;
		this.timer = null;
		this.timer2 = null;
	}

	componentWillMount () {
		this._getData();
	}

	componentDidMount () {

	}


	//获取消息数据
	_getData = async () => {
		let sendData = {
			pageNo: 1,
			pageSize: 5,
			isRead: 0  // 0 未读  1 已读
		}
		let messageData = await HTTP.POST(API_GENERATE(API.INFO_LIST), sendData);
		if (messageData && messageData.rows && messageData.rows.length) {
			this.messageList = messageData.rows;
			this.messageList.push(messageData.rows[0]);
			this.recordCount = messageData.recordCount;
			this.setState({
				ls: true
			})
			this.timer2 = setTimeout(() => {
				this._animationFn(this.messageList)
			}, 2500)
		}
	}

	//动画
	_animationFn = (data) => {
		if (!this.stopAnimated) return;
		this.speed++;
		Animated.timing(
			this.state.iTop,                    // 动画中的变量值
			{
				toValue: -25 * this.speed * scale, // 透明度最终变为1，即完全不透明
				duration: 1500,                   // 让动画持续一段时间
			}
		).start(() => {
			if (!this.stopAnimated) return;
			if (data && data.length - 1 <= this.speed) {
				this.speed = 0;
				this.setState({
					iTop: new Animated.Value(0)
				})
			}
			this.timer = setTimeout(() => {
				this._animationFn(data);
			}, 3000)
		});
	}


	render () {
		let { iTop } = this.state;
		return (
			<View style={styles.messBox}>
				<NavigationEvents
					onDidFocus={({ action }) => {
						this.stopAnimated = true;
						this._getData();
					}}
					onWillBlur={() => {
						this.stopAnimated = false;
						clearTimeout(this.timer);
						clearTimeout(this.timer2);
					}}
				/>
				<View style={styles.messBoxBg}></View>
				<TouchableOpacity onPress={() => { navigationSeevice.navigate('MessageIndexPage') }} style={styles.messBoxContain}>
					<View style={styles.messageIcon}>
						<Image style={styles.messageIconImg} source={require('../../../imgs/icon/message.png')} />
					</View>
					<View style={styles.messageScollOut}>
						{
							this.messageList && this.messageList.length ? (<Animated.View style={[styles.messageScoll, { top: iTop }]} >
								{
									this.messageList && this.messageList.map((item, index) => {
										return <Text key={index} style={styles.messageText}>{item.content && item.content.length > 12 ? item.content.substr(0, 12) + "..." : item.content}</Text>
									})
								}
							</Animated.View>) : <Text style={styles.messageText}>暂无未读消息</Text>
						}
					</View>
					{
						this.recordCount && this.recordCount > 0 ? (<TouchableOpacity onPress={() => { navigationSeevice.navigate('MessageIndexPage') }} style={styles.messageMoreBox} >
							<Text style={styles.messageMore}>{this.recordCount > 999 ? '999+' : this.recordCount}</Text>
						</TouchableOpacity>) : null
					}
				</TouchableOpacity>
			</View>
		)
	}

}

const styles = StyleSheet.create({
	messBox: {
		width: 250 * scale,
		height: 25 * scale,
		marginTop: 5 * scale,
		position: 'relative'
	},
	messBoxBg: {
		width: 250 * scale,
		height: 23 * scale,
		borderRadius: 10 * scale,
		backgroundColor: '#000',
		opacity: .4,
		position: 'absolute',
	},
	messBoxContain: {
		flexDirection: 'row',
		height: 23 * scale,
		alignItems: 'center',
		justifyContent: 'space-around'
	},

	messageIcon: {
		width: 18 * scale,
		height: 18 * scale,
	},
	messageIconImg: {
		width: 18 * scale,
		height: 18 * scale
	},
	messageMoreBox: {
		backgroundColor: style.color.fontRed1,
		width: 35 * scale,
		height: 16 * scale,
		borderRadius: 8 * scale,
	},
	messageMore: {
		color: style.color.white,
		fontSize: 10 * scale,
		textAlign: 'center',
		lineHeight: 16 * scale,
	},
	messageClick: {
		height: 16 * scale,
	},
	messageScollOut: {
		width: 170 * scale,
		position: 'relative',
		height: 25 * scale,
		overflow: 'hidden'
	},
	messageScoll: {
		position: 'absolute',
		left: 0
	},
	messageText: {
		color: style.color.white,
		width: 170 * scale,
		height: 25 * scale,
		lineHeight: 25 * scale,
		fontSize: 11 * scale
	},
})